/*
 * @Author: aleimu
 * @Date: 2021-03-24 09:45:39
 * @Description: Table 更新时未渲染的问题 , 涉及数据的对象引用和值拷贝
 * https://blog.csdn.net/qq_28060549/article/details/88051741
 * 
 */

import ReactDOM from 'react-dom';
import React, { useEffect, useState } from "react";

import { Table, Tag, Space, Button } from 'antd';

const ChangeTable = () => {
    const [data, setData] = useState([]);
    const [value, setValue] = useState(1); // 传值
    const [ref, setRef] = useState({}); // 传引用
    const dataTmp = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];

    useEffect(() => {
        setData(dataTmp);
    }, [])

    const deleteUser = (index) => {
        data.pop()
        console.log(data)
        //TODO 一下操作单独执行才能发现区别,混合执行时会有影响
        setData([...data]) // 重点: 更新state时, 注意不要在引用上直接操作

        setValue(Math.random()) // 可以更新 table

        setRef({ data: Math.random() }) // 可以更新 table

        ref['data'] = Math.random();
        setRef(ref); // 不可以更新 table

        // 当 setValue 配合 setRef使用时,传引用的 setRef 之前单独使用时不能更新 table 的操作也能更新了
    }

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{value}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            render: text => <a>{ref['data']}</a>,
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: tags => (
                <>
                    {tags.map(tag => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record, index) => (
                <Space size="middle">
                    <Button onClick={() => deleteUser(index)}> Delete</Button>
                </Space >
            ),
        },
    ];
    return (
        <Table columns={columns} dataSource={data} />
    )
}


export default ChangeTable